{% load static %}
{% load blog_tags %}

<!DOCTYPE html>
<html>
<head>
    <!-- 页面标题块 -->
    <title>{% block title %}{% endblock %}</title>
    <!-- 加载静态 CSS 文件 -->
    <link href="{% static 'css/blog.css' %}" rel="stylesheet">
</head>
<body>
    <!-- 内容区域 -->
    <div id="content">
        {% block content %}
            <!-- 遍历 posts 列表，显示每个 post 的详细信息 -->
            {% for post in posts %}
                <h2>
                    <a href="{{ post.get_absolute_url }}">{{ post.title }}</a>
                </h2>
                <p>Published {{ post.publish }} by {{ post.author }}</p>
                <p>{{ post.body|truncatewords:30|linebreaks }}</p>
            {% endfor %}
             
            <!-- 包含分页模板 -->
            {% include "pagination.html" with page=posts %}
        {% endblock %}
    </div>
    <!-- 侧边栏区域 -->
    <div id="sidebar">
        <h2>我的博客</h2>
        <p>这是我的博客，我已经发布了 {% total_posts %} 篇文章.</p>
        
        <!-- 最近发布文章列表 -->
        <h3>最近发布文章</h3>
        <!-- 使用 show_latest_posts 自定义模版标签显示最近发布文章列表 -->
        {% show_latest_posts %}
        
        <!-- 评论最多文章 -->
        <h3>评论最多文章</h3>
        <!-- 使用 get_most_commented_posts 标签获取评论最多标签保存到变量 most_commented_posts 中 -->
        {% get_most_commented_posts as most_commented_posts %}
        <ul>
            <!-- 对于每一个评论最多的文章 -->
            {% for post in most_commented_posts %}
            <li>
                <!-- 显示文章标题并转为超链接 -->
                <a href="{{ post.get_absolute_url }}">{{ post.title }}</a>
            </li>
            {% endfor %}
        </ul>
    </div>
</body>
</html>
